<template>
  <div>
    <div class="bod">
      <header>
        <h1>消息中心</h1>
      </header>
      <main>
        <ul>
          <li class="li1">
            <div class="con1">
              <div>
                <img src="../../../public/lzc/m1.png" alt="" />
              </div>
              <div class="sale">
                <h1>系统消息</h1>
                <h2>&nbsp;&nbsp;&nbsp;</h2>
              </div>
            </div>
          </li>
          <li>
            <div class="con1">
              <div>
                 <img src="../../../public/lzc/m3.png" alt="" />
              </div>
              <div class="sale">
                <h1>
                  促销消息
                </h1>
                <h2>&nbsp;&nbsp;&nbsp;夏季美肌必备</h2>
              </div>
            </div>
          </li>
          <li>
            <div class="con1" >
              <div>
                <img src="../../../public/lzc/m3.png" alt="" />
              </div>
              <div class="sale">
                <h1>客服助手</h1>
                <h2>&nbsp;&nbsp;&nbsp;点击查看你与客服的沟通记录</h2>
              </div>
            </div>
          </li>
          <li  style="border: none">
            <div class="con1">
              <div>
                <img src="../../../public/lzc/m4.png" alt="" />
              </div>
              <div class="sale">
                <h1>社区消息</h1>
                <h2>&nbsp;&nbsp;&nbsp;点击查看社区消息</h2>
              </div>
            </div>
          </li>
        </ul>

        <ul>
          <li class="li1">
            <div class="con1">
              <div>
                <img src="../../../public/lzc/1.png" alt="" />
              </div>
              <div class="sale">
                <h1>西安画美医疗美容医院...</h1>
                <h2>
                  &nbsp;&nbsp;&nbsp;请不要用河狸家App以外的其他聊天工具，谨防被骗...
                </h2>
              </div>
            </div>
          </li>
          <li>
            <div class="con1">
              <div>
                 <img src="../../../public/lzc/2.png" alt="" />
              </div>
              <div class="sale">
                <h1>
                  西安河狸家旗舰店管理员
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span> 昨天20：00</span>
                </h1>
                <h2>
                  &nbsp;&nbsp;&nbsp;请不要用河狸家App以外的其他聊天工具，谨防被骗...
                </h2>
              </div>
            </div>
          </li>
          <li>
            <div class="con1">
              <div>
                <img src="../../../public/lzc/3.png" alt="" />
              </div>
              <div class="sale">
                <h1>西安河狸家旗舰店</h1>
                <h2>&nbsp;&nbsp;&nbsp;[作品]</h2>
              </div>
            </div>
          </li>
          <li style="border: none">
            <div class="con1" >
              <div>
                 <img src="../../../public/lzc/4.png" alt="" />
              </div>
              <div class="sale">
                <h1>医美在线客服 <span class="G">官方</span></h1>
                <h2>
                  &nbsp;&nbsp;&nbsp;hello,小河里等你很久了，请问有什么可以帮您？
                </h2>
              </div>
            </div>
          </li>
        </ul>
      </main>
    <!-- footer -->
    <!-- <Footer /> -->
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.bod{
  background-color: gainsboro;
  height: 12rem;
}
header {
  width: 100%;
  height: 1.84rem;
  background-color: white;
  font-size: 0.2rem;
  line-height: 1.84rem;
  text-align: center;
}
main .con1 {
  display: flex;
  align-items: center;

  
  margin-left: 0.2rem;
}
main  li{
border-bottom: 0.01rem solid gray;
}
main .con1 img {
  width: 0.9rem;
  height: 0.9rem;
}
main .con1 .sale h1 {
  margin-left: 0.2rem;
  font-size: 0.3rem;
  margin-top: 0.04rem;
  position: relative;
}
main .con1 .sale h1 span {
  font-size: 0.22rem;
  color: gray;
}
main ul li .con1 .G {
  display: inline-block;
  background-color: rgb(209, 157, 115);
  width: 0.6rem;
  text-align: center;
  color: white;
}
main .con1 .sale h2 {
  font-size: 0.22rem;
  color: gray;
}
main li {
  width: 100%;
  background-color: white;
}
main ul li:nth-of-type(1) {
  margin-top: 0.2rem;
}
</style>